<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas example</title>
<script>
	/* var a=10;
	for(i=1; i<=10; i++){
		document.write(i);*/
	window.onload = function(){
		var canvas = document.getElementById("mycanvas");
		var ctx = canvas.getContext("2d");
		ctx.strokeStyle = "#ff0000";
		ctx.fillStyle="#0000ff";
		ctx.strokeRect(100, 100, 300, 300);
		ctx.fillRect(200, 200, 100, 100);
		      
		var color = new Array(	'#ff0000', '#00ff00', '#0000ff',
								'#ffff00', '#00ffff', '#ff00ff',
								'#000000', '#212121', '#cccccc');
		var j = 0;
		for(i=10; i<500; i=i+60){
			ctx.fillStyle = color[j];
		   	ctx.fillRect(i, 450, 55, 55);
		    j++;
		}
	}
</script>
</head>
<body>
	<Canvas id = 'mycanvas' width = '600px', height='500px'> </Canvas>
</body>
</html>